<template>
	<view class="flex-col justify-start page">
		<view class="flex-col group_3">
			<view class="flex-col group_4">
				<view class="flex-row justify-between self-stretch group_5">
					<view v-for="(item,index) in navtop" :key="index" @click="navtoptab(index)">
						<text :class="type == index ?'font_3 text_6':'font_2 text_5' ">{{item.text}}</text>
						<view style="margin-left: 30rpx; margin-top: 12rpx;" class=" section view" v-if="type == index">
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="flex-col justify-start items-center image-wrapper">
				<image class="image_5" src="/static/icon/banner.png" />
			</view> -->

			<view class="">
				<img style="width: 100%;" :src="image" alt="" />

			</view>
			<view class="flex-col group_6">
				<view class="flex-row justify-between self-stretch group_7">

					<view style=" display: grid;
  place-items: center;" v-for="(item,index) in navlist" @click="navitemtab(index)">
						<text :class="types == index?'font_3 text_9':'font_2 text_7' ">{{item.title}}</text>
						<view v-if="types == index" style="margin-top: 12rpx; " class="section view_2"></view>

					</view>
					<!--    <text class="font_2 text_8">中面</text>
	        <text class="font_2">依维柯</text>
	        <text class="font_3 text_9">厢货</text> -->
				</view>
			</view>
			
			<view class="content" v-html="content"></view>
			
			<!-- <view class="flex-col group_8">
				<view class="flex-col">
					<text class="self-start font_4 text_10">全程含搬运，中途不加价</text>
					<view class="flex-row items-center self-stretch section_2 mt-17">
						<view class="flex-col justify-start items-center shrink-0 text-wrapper">
							<text class="text_11">厢货总费用</text>
						</view>
						<view class="flex-col items-start flex-1 group_9 ml-11-5">
							<text class="font_5">起步价+超公里费+楼层费+平地搬运费+大件</text>
							<text class="font_5">搬运费+拆装费+额外服务费</text>
						</view>
					</view>
				</view>
				<view class="flex-col group_10">
					<text class="self-start font_4">起步价</text>
					<view class="flex-col self-stretch group_11 mt-13-5">
						<view class="flex-row justify-between self-stretch section_3">
							<text class="font_6 text_12">含10公里+2人全程搬运</text>
							<view class="group_12">
								<text class="font_7">398</text>
								<text class="font_6 text_13">元（工作日）</text>
							</view>
						</view>
						<view class="self-end group_13 mt-15-5">
							<text class="font_7">448</text>
							<text class="font_6 text_14">元（周末）</text>
						</view>
					</view>
				</view>
				<view class="flex-col group_14">
					<text class="self-start font_4">超公里费</text>
					<view class="flex-col justify-start items-start input text-wrapper_2 mt-13-5">
						<text class="font_6 text_15">每公里</text>
					</view>
				</view>
				<view class="flex-col group_15">
					<text class="self-start font_4">楼层费</text>
					<view class="flex-col self-stretch group_16 mt-13">
						<view class="flex-row justify-between section_4">
							<text class="font_6 text_16">全程电梯或楼梯1层</text>
							<text class="font_6 text_17">免费</text>
						</view>
						<view class="flex-row justify-between group_1">
							<text class="font_6 text_18">楼梯2-3层</text>
							<view class="group_18">
								<text class="font_7">20</text>
								<text class="font_6">元/层</text>
							</view>
						</view>
						<view class="flex-row justify-between section_5">
							<text class="font_6 text_19">楼梯4-6层</text>
							<view class="group_18">
								<text class="font_7">30</text>
								<text class="font_6">元/层</text>
							</view>
						</view>
						<view class="flex-row justify-between group_21">
							<text class="font_6 text_20">楼梯7层及以上</text>
							<view class="group_18">
								<text class="font_7 text_21">45</text>
								<text class="font_6">元/层</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col group_19">
					<text class="self-start font_4 text_22">服务说明</text>
					<view class="mt-16 flex-col items-start self-stretch">
						<text class="font_8">1、开通城市有北京、上海、广州、深圳、北京、</text>
						<text class="font_8 mt-3-5">上海、广州、深圳等城市。开通城市有北京、上</text>
						<text class="font_8 mt-3-5">海、广州、深圳、北京、上海、广州、深圳等城</text>
						<text class="font_8 mt-3-5">城市。</text>
					</view>
				</view>
				<view class="flex-col items-start group_20">
					<text class="font_8">2、开通城市有北京、上海、广州、深圳、北京、</text>
					<text class="font_8 mt-3-5">上海、广州、深圳等城市。开通城市有北京、上</text>
					<text class="font_8 mt-3-5">海、广州、深圳、北京、上海、广州、深圳等城</text>
					<text class="font_8 mt-3-5">城市。</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		Articlelist
	} from '@/utils/user.js'

	export default {
		data() {
			return {
				navtop: [{
					text: "普通搬家",
					id: 5
				}, {
					text: "日式搬家",
					id: 6
				}, {
					text: "企业搬家",
					id: 7
				}],
				type: 0,
				navlist: [],
				types: 0,

				image: '',
				content: ''


			}
		},
		onLoad() {
			this.oute(5)

		},
		methods: {

			navtoptab(i) {
				this.type = i
				var id = this.navtop[i].id

				this.types = 0

				this.oute(id)
			},
			navitemtab(i) {
				this.types = i

				var data = this.navlist[i]

				this.image = data.img
				this.content = data.content

			},

			oute(e) {

				// 1 => ‘攻略’,
				// 2 => ‘普通搬家服务’,
				// 3 => ‘日式搬家服务’,
				// 4 => ‘企业搬迁服务’,
				// 5 => ‘普通搬家收费’,
				// 6 => ‘日式搬家收费’,
				// 7 => ‘企业搬迁收费’,
				// Articlelist

				var data = {
					type: e,
					page: 1
				}

				Articlelist(data).then(res => {

					console.log(res)
			 
					this.navlist = res.data.data.list
					this.navitemtab(0)

				}).catch(error => {
					console.error('Articlelist 方法执行出错：', error);
				});
			}

		}
	}
</script>

<style>
	
	.content{
		/* border: 2px solid red; */
		width: 90%;
		margin: 0 auto;
	}
	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-11-5 {
		margin-left: 23rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.mt-13-5 {
		margin-top: 27rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-3-5 {
		margin-top: 7rpx;
	}

	.page {
		padding-bottom: 145rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		padding-bottom: 87.46rpx;
		overflow-y: auto;
	}

	.group_4 {
		padding: 0 78.04rpx 24rpx 81.02rpx;
	}

	.group_5 {
		padding: 31.16rpx 0 27.92rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 27.7rpx;
		color: #666666;
	}

	.text_5 {
		line-height: 27.84rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 27.7rpx;
		font-weight: 600;
		color: #222222;
	}

	.text_6 {
		line-height: 27.96rpx;
	}

	.section {
		background-color: #2b8eff;
		border-radius: 1rpx;
		width: 60rpx;
		height: 6rpx;
	}

	.view {
		margin-right: 31.96rpx;
	}

	.image-wrapper {
		margin: 0 12rpx;
		padding: 119rpx 0 120rpx;
		border-radius: 12rpx;
		/* background-image: url('/static/icon/bf.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_5 {
		width: 70rpx;
		height: 70rpx;
	}

	.group_6 {
		padding: 0 61.98rpx 47.28rpx 66.02rpx;
	}

	.group_7 {
		padding: 47.28rpx 0 27.92rpx;
	}

	.text_7 {
		line-height: 27.14rpx;
	}

	.text_8 {
		line-height: 27.84rpx;
	}

	.text_9 {
		line-height: 28.24rpx;
	}

	.view_2 {
		margin-right: 2.02rpx;
	}

	.group_8 {
		padding: 0 24rpx;
	}

	.font_4 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 29.86rpx;
		color: #222222;
	}

	.text_10 {
		line-height: 32.18rpx;
	}

	.section_2 {
		background-color: #2b8eff14;
		border-radius: 16rpx;
	}

	.text-wrapper {
		padding: 45.82rpx 0 44.04rpx;
		background-color: #2b8eff;
		border-radius: 16rpx 0rpx 0rpx 16rpx;
		width: 180rpx;
		height: 116rpx;
	}

	.text_11 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.14rpx;
	}

	.group_9 {
		margin-right: 31.1rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 36rpx;
		color: #222222;
	}

	.group_10 {
		margin-top: 47.64rpx;
	}

	.group_11 {
		padding-bottom: 26.42rpx;
		border-radius: 16rpx;
		border-left: solid 1rpx #f4f5f7;
		border-right: solid 1rpx #f4f5f7;
		border-top: solid 1rpx #f4f5f7;
		border-bottom: solid 1rpx #f4f5f7;
	}

	.section_3 {
		padding: 29.32rpx 10.4rpx 27.42rpx 26.78rpx;
		background-color: #f4f5f7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.14rpx;
		color: #222222;
	}

	.text_12 {
		line-height: 22.12rpx;
	}

	.group_12 {
		line-height: 22.42rpx;
		height: 22.42rpx;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.8rpx;
		color: #2b8eff;
	}

	.text_13 {
		line-height: 22.42rpx;
	}

	.group_13 {
		margin-right: 11.58rpx;
		line-height: 22.42rpx;
	}

	.text_14 {
		line-height: 22.42rpx;
	}

	.group_14 {
		margin-top: 47.68rpx;
	}

	.input {
		align-self: stretch;
	}

	.text-wrapper_2 {
		padding: 29.22rpx 0 28.6rpx;
		background-color: #f4f5f7;
		border-radius: 16rpx;
	}

	.text_15 {
		margin-left: 26.96rpx;
		line-height: 22.18rpx;
	}

	.group_15 {
		margin-top: 47.7rpx;
	}

	.group_16 {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		border-left: solid 1rpx #f4f5f7;
		border-right: solid 1rpx #f4f5f7;
		border-top: solid 1rpx #f4f5f7;
		border-bottom: solid 1rpx #f4f5f7;
	}

	.section_4 {
		padding: 29.26rpx 22.78rpx 28.48rpx 26.86rpx;
		background-color: #f4f5f7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.text_16 {
		line-height: 22.18rpx;
	}

	.text_17 {
		color: #2b8eff;
		line-height: 22.26rpx;
	}

	.group_1 {
		padding: 29.3rpx 23.92rpx 28.52rpx 24.84rpx;
	}

	.text_18 {
		line-height: 22.18rpx;
	}

	.group_18 {
		line-height: 22.14rpx;
		height: 22.14rpx;
	}

	.section_5 {
		padding: 29.3rpx 21.94rpx 28.52rpx 26.84rpx;
		background-color: #f4f5f7;
	}

	.text_19 {
		line-height: 22.18rpx;
	}

	.group_21 {
		padding: 29.3rpx 23.92rpx 30.44rpx 24.84rpx;
	}

	.text_20 {
		line-height: 22.26rpx;
	}

	.text_21 {
		line-height: 17.46rpx;
	}

	.group_19 {
		margin-top: 47.48rpx;
	}

	.text_22 {
		line-height: 30.08rpx;
	}

	.font_8 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 38rpx;
		color: #666666;
	}

	.group_20 {
		margin-top: 38.84rpx;
	}
</style>